<script setup lang="ts">
import { computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 计算面包屑数据
const breadcrumbs = computed(() => {
  // 获取当前路由路径
  const path = route.path
  // 分割路径
  const pathArray = path.split('/').filter(Boolean)

  // 构建面包屑数组
  const breadcrumbArray = []
  let currentPath = ''

  // 添加首页
  if (pathArray[0] === 'user') {
    breadcrumbArray.push({
      name: '首页',
      path: '/user/overview',
      meta: { title: '首页' }
    })
    currentPath = '/user'
  } else if (pathArray[0] === 'doctor') {
    breadcrumbArray.push({
      name: '首页',
      path: '/doctor/overview',
      meta: { title: '首页' }
    })
    currentPath = '/doctor'
  }

  // 遍历路径构建面包屑
  for (let i = 1; i < pathArray.length; i++) {
    const segment = pathArray[i]
    // 检查是否是动态路由参数（以冒号开头或包含数字和字母的混合）
    const isDynamicSegment = segment.includes(':') || /^[a-zA-Z]+\d+$/.test(segment)

    currentPath += `/${segment}`

    // 查找匹配的路由，处理动态路由
    let matchedRoute = router.getRoutes().find(route => {
      // 精确匹配
      if (route.path === currentPath) return true

      // 动态路由匹配（如 /patient-detail/:id）
      const routeParts = route.path.split('/')
      const currentParts = currentPath.split('/')

      if (routeParts.length !== currentParts.length) return false

      for (let j = 0; j < routeParts.length; j++) {
        // 如果路由部分以冒号开头（动态参数），则认为匹配
        if (routeParts[j].startsWith(':')) continue
        if (routeParts[j] !== currentParts[j]) return false
      }

      return true
    })

    if (matchedRoute) {
      // 使用路由元数据中的标题，如果没有则格式化路径名称
      const title = matchedRoute.meta.title || formatRouteName(segment)
      breadcrumbArray.push({
        name: title,
        path: currentPath,
        meta: matchedRoute.meta
      })
    } else {
      // 如果没有匹配的路由，使用格式化的路径名称
      breadcrumbArray.push({
        name: formatRouteName(segment),
        path: currentPath,
        meta: {}
      })
    }
  }

  return breadcrumbArray
})

// 格式化路由名称（将短横线分隔的路径转换为可读文本）
function formatRouteName(name: string): string {
  // 将短横线替换为空格，并将每个单词首字母大写
  const formattedName = name.replace(/-/g, ' ')
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')

  // 中文路由名称映射
  const routeNameMap: Record<string, string> = {
    // 通用路由
    'overview': '概览',
    'profile': '个人中心',
    'schedule': '日程',

    // 用户端路由
    'health-evaluation': '健康评估',
    'data-monitor': '数据监测',
    'archive-management': '档案管理',
    'archive-detail': '档案详情',
    'health-plan': '健康计划',
    'integrated-plan': '综合计划',
    'lifestyle-management': '生活方式管理',
    'mental-health-support': '心理健康支持',
    'prevention-promotion': '预防与促进',
    'family-health': '家庭健康',
    'online-consultation': '在线咨询',
    'emergency-service': '紧急服务',
    'user-appointment': '预约服务',
    'doctorDetail': '医生详情',
    'appointment': '预约服务',

    // 医生端路由
    'analysis': '数据分析',
    'patient-list': '患者列表',
    'patient-detail': '患者详情',
    'patient-trace': '患者追踪',
    'consultation': '远程会诊',
    'emergency': '紧急服务',
    'RightContent': '基本信息',
    'risk-assessment': '风险评估',
    'ai-diagnosis': 'AI诊断',
    'prescription-suggestions': '处方建议'
  }

  return routeNameMap[name] || formattedName
}

// 处理面包屑点击事件
const handleBreadcrumbClick = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div class="breadcrumb-container">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbs"
        :key="index"
        :to="index < breadcrumbs.length - 1 ? item.path : ''"
        @click="index < breadcrumbs.length - 1 ? handleBreadcrumbClick(item.path) : null"
      >
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style scoped>
.breadcrumb-container {
  padding: 16px 0;
  background-color: transparent;
}

:deep(.el-breadcrumb__item) {
  cursor: pointer;
}

:deep(.el-breadcrumb__inner) {
  color: var(--el-text-color-secondary);
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: var(--el-text-color-primary);
  font-weight: bold;
}
</style>
